<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2024-03-05
 * @FilePath: /element-admin/src/views/FoodCalDinnerTab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Food-Cal-DinnerTab-page">
    <!--顶部搜索栏-->
<!--    <div class="col-md-12">-->
<!--      <el-row :gutter="20">-->
<!--        <el-col :span="22" :offset="1" class="clearfix">-->
<!--          <el-form :inline="true" :model="query" class="demo-form-inline">-->
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="handleMemExut" :disabled="exDis" size="small">2.会员热量缺口计算-->
<!--              </el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <div v-for="(member,index) in FoodCalDayList" :key="index" class="text item mainTabTable">
            <span v-if="false">{{member}}</span>
            <el-table :data="member.dinners"
                      :cell-style="{padding:'5px'}"
                      :key="isIndex" v-loading="isLoading" border
                      stripe row-key="id">
              <el-table-column v-if="isIndex == 1" fixed label="序号" type="index" width="75"></el-table-column>
              <el-table-column label="天数" prop="day" width="120">
                <template v-slot="scope">
                  {{ scope.row.day }}
                </template>
              </el-table-column>
              <el-table-column label="会员名称" width="110px">
                {{ member.memName }}
              </el-table-column>
              <el-table-column prop="zaocan" label="早餐(克) 克重 / 食材 /  单位热量">
                <template v-slot="scope">
                  <el-descriptions class="margin-top" :column="1" :size="'mini'" border :contentStyle="content_style"
                                   :label-style="label_style" v-for="(dinner,index) in scope.row.dinners" :key="index">
                    <el-descriptions-item span="1" class="el-descriptions-width" v-for="(can,index) in dinner.zaocan" :key="index">
                      <template slot="label">{{ can.name }}</template>
                      <span>{{ can.intake }}</span> / <span>{{ can.food }}</span> / (<span>{{ can.unit }}</span>)
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
              <el-table-column prop="wucan" label="午餐(克) 克重 / 食材 /  单位热量">
                <template v-slot="scope">
                  <el-descriptions class="margin-top" :column="1" :size="'mini'" border :contentStyle="content_style"
                                   :label-style="label_style" v-for="(dinner,index) in scope.row.dinners" :key="index">
                    <el-descriptions-item class="el-descriptions-width" v-for="(can,index) in dinner.wucan" :key="index">
                      <template slot="label">{{ can.name }}</template>
                      <span>{{ can.intake }}</span> / <span>{{ can.food }}</span> / (<span>{{ can.unit }}</span>)
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
              <el-table-column prop="wancan" label="晚餐(克) 克重 / 食材 /  单位热量">
                <template v-slot="scope">
                  <el-descriptions class="margin-top" :column="1" :size="'mini'" border :contentStyle="content_style"
                                   :label-style="label_style" v-for="(dinner,index) in scope.row.dinners" :key="index">
                    <el-descriptions-item class="el-descriptions-width" v-for="(can,index) in dinner.wancan" :key="index">
                      <template slot="label">{{ can.name }}</template>
                      <span>{{ can.intake }}</span> / <span>{{ can.food }}</span> / (<span>{{ can.unit }}</span>)
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import {exutMemDinner} from "@/api/MemberWeight";

export default {
  name: "FoodCalDinnerTabView",
  components: {},
  data() {
    return {
      isIndex: 1,
      isLoading: false,
      exDis: false,
      tabId: "",
      query: {
        key: '',
        pageSize: 20,
        pageNum: 1,
      },
      // tableHeight: 650,
      FoodCalDayList: [],
      content_style: {
        'text-align': 'center',
        'min-width': '100px',
        'word-break': 'break-all'
      },
      label_style: {
        'color': '#000',
        'text-align': 'left',
        'background-color': '#d6dbe1',
        'min-width': '120px',
        'word-break': 'keep-all'
      }
    }
  },
  props: {
    drawId: {type: [Object, String], default: ""}
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    init_obj() {
      return {
        FoodCalDayList: [],
      }
    },
    handle_init(tabId) {
      this.tabId = tabId;
      this.init_obj();
    },
    // 计算会员热量缺口
    handleMemExut() {
      this.init_obj();
      this.isLoading = true;
      // this.exDis = true;
      exutMemDinner().then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.exDis = false;
          this.FoodCalDayList = res.data;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    async MemExut(query) {
      this.init_obj();
      this.isLoading = true;
      // this.exDis = true;
      await exutMemDinner(query).then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.exDis = false;
          this.FoodCalDayList = res.data;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
          return 200;
        }
        return 500;
      }).catch(err => {
        this.$notify({title: '执行失败', message: 'STEP B 数据操作异常' + err, type: 'error', offset: 100});
      });
    },
  },
  created() {

  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        this.handle_init(drawId);
      }
    }
  }
}
</script>
<style scoped>
.mainTabTable {
  margin-top:15px;
  /*height: 650px;*/
  overflow-y: auto;
  overflow-x: hidden;
}
.el-descriptions-width { width: 20%; }
</style>